<template>
  <view class="content">
    <view class="app-title ac">
      <view class="fl" @click="back">
        <image class="back" src="/static/img/back.png"></image> </view
      >报警详情
    </view>
    <view class="wrap" v-if="detail.imgs">
      <u-swiper :list="list" @click="zoomPic"></u-swiper>
    </view>
    <view v-if="!detail.imgs" class="top-bg"></view>
    <view v-if="!detail.imgs" class="alarm ac">
      <image class="icon" src="/static/img/alarm.jpg"></image>
      <view
        ><b
          >{{ detail.line }}{{ detail.line && detail.station ? "-" : ""
          }}{{ detail.station }}</b
        ></view
      >
      <view>报警来源</view>
    </view>

    <view class="detail">
      <u-cell-group>
        <u-cell-item
          v-if="detail.imgs"
          title="报警来源:"
          :value="showTitle()"
          :arrow="false"
        ></u-cell-item>
        <u-cell-item
          title="设备名称:"
          :value="detail.driveName"
          @click="jumpUrl('/pages/device/deviceDetail', detail.equId)"
        ></u-cell-item>
        <u-cell-item
          title="设备类型:"
          :value="detail.driveType"
          :arrow="false"
        ></u-cell-item>
        <u-cell-item
          title="发生时间:"
          :value="detail.startTimeStr"
          :arrow="false"
        ></u-cell-item>
        <u-cell-item
          title="报警描述:"
          :value="detail.content"
          :arrow="false"
        ></u-cell-item>
        <u-cell-item
          title="处理状态:"
          :value="detail.handleflag == 0 ? '未处理' : '已处理'"
          :arrow="false"
        ></u-cell-item>
        <u-cell-item
          title="报警级别:"
          :value="detail.levels"
          :arrow="false"
        ></u-cell-item>
        <u-cell-item
          title="检修状态:"
          :value="detail.maintainFlag == 0 ? '未检修' : '已检修'"
          :arrow="false"
        >
        </u-cell-item>
      </u-cell-group>
    </view>

    <!-- <view class="btn">
      <button
        class="cancel-btn"
        @click="jumpUrl('/pages/alarm/alarmRecord', id)"
      >
        查看处理记录
      </button>
      <button
        class="default-btn fr"
        @click="jumpUrl('/pages/alarm/fault', detail.code)"
      >
        查看维修建议
      </button>
    </view>

    <view class="zoom-pic ac" v-show="zoom" @click="zoom = false">
      <image class="imgs" :src="src"></image>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        // {
        // 	image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
        // 	title: '昨夜星辰昨夜风，画楼西畔桂堂东'
        // },
        // {
        // 	image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
        // 	title: '身无彩凤双飞翼，心有灵犀一点通'
        // },
        // {
        // 	image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
        // 	title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
        // }
      ],
      id: "",
      detail: "",
      src: "",
      zoom: false,
    };
  },
  onLoad() {
    // this.id = options.id;
    this.detail = this.$store.state.alarmDetail;
  },
  created() {
    this.initDetail();
  },
  methods: {
    showTitle() {
      if (this.detail) {
        return this.detail.line + "-" + this.detail.station;
      }
    },
    back() {
      uni.navigateBack();
    },
    jumpUrl(url, id) {
      uni.navigateTo({
        url: id ? url + "?id=" + id : url,
      });
    },
    zoomPic(i) {
      this.src = this.list[i].image;
      this.zoom = true;
    },
    initDetail() {
      // this.fetch('GET', this.baseUrl() + '/home/alarmDetail', {
      // 	id: this.id
      // }, true).then((res) => {
      // 	if (res.returnCode == 1) {
      // 		this.detail = res.data;
      // 		if(this.detail.imgs != '') {
      // 			let arr = JSON.parse(this.detail.imgs);
      // 			arr.map((item,i)=>{
      // 				this.list.push({image:this.baseUrl()+item,title:i+1})
      // 			})
      // 		}
      // 	}
      // })
    },
  },
};
</script>

<style scoped>
/* .detail{
		height: auto!important;
	} */
.wrap {
  padding: 40rpx;
}
.top-bg {
  height: 60px;
}
.alarm {
  width: 91.5%;
  margin: 0 auto;
  margin-top: -30px;
}
.alarm > .icon {
  width: 70px;
  height: 70px;
}
.alarm > view:last-child {
  font-size: 12px;
  margin-top: 4px;
  margin-bottom: 16px;
}
.detail {
  margin-top: 0;
  height: 66.5vh;
}
.van-cell__title {
  width: 5em;
}
.van-cell__value {
  text-align: right;
}
.btn {
  position: absolute;
  bottom: 2%;
  left: 0;
  width: 100%;
  padding: 0 20px;
  z-index: 10;
}
.btn > button {
  width: 48%;
  display: inline-block;
}
.zoom-pic {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  line-height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}
.zoom-pic > .imgs {
  max-width: 100%;
  max-height: 100vh;
  vertical-align: middle;
}
</style>
